<template>
    <div class="maxMap">
        <div class="left">
            <div class="leftSon">
                <dv-border-box-1 backgroundColor="r" :color="['pink ', 'yellow']">
                    <dv-capsule-chart :config="configZt" style="width:300px;height:200px" />
                </dv-border-box-1>
            </div>
            <div class="leftSon1" style="display:flex">

                <dv-border-box-8 backgroundColor="r" :color="['pink ', 'yellow']">
                    <dv-water-level-pond :config="config" style="width:150px;height:200px" />

                    <dv-water-level-pond :config="configs" style="width:150px;height:200px" />
                </dv-border-box-8>
                
            </div>
            <div class="leftSon">
                <dv-border-box-1 backgroundColor="r" :color="['pink ', 'yellow']">
                    <dv-scroll-board  slot-scope="scope"  @click="data1(scope)" :config="configTbale" style="width:100%;height:100%" />
                </dv-border-box-1>
            </div>
        </div>

        <div class="mid">
            <div class="maxDt">
                <mapMap></mapMap>
            </div>
        </div>

        <div class="right">
            <div class="leftSon1">
                <dv-border-box-5 backgroundColor="r" :color="['pink ', 'yellow']">
                    <dv-decoration-9 style="width:150px;height:150px;">66%</dv-decoration-9> 
                </dv-border-box-5>
            </div>
            <div class="leftSon1" style="display:flex">
                <dv-border-box-6 backgroundColor="r" :color="['pink ', 'yellow']">
                    <dv-percent-pond :config="configJd" style="width:200px;height:100px;" />
                </dv-border-box-6>
            </div>
            <div class="leftSon1">
                <dv-border-box-7  :color="['blue']">
                    <dv-capsule-chart :config="configZt" :max='1000' style="width:300px;height:200px" />
                </dv-border-box-7>
            </div>
        </div>
    </div>
</template>

<script>
import mapMap from './commponets/map.vue'
export default {
    components:{
        mapMap,
    },
    data(){
        return{
            defaults:{
                
            },
            config:{
                data: [66, 35],
                shape: 'roundRect'
            },
            configs:{
                data: [55],
                shape: 'round'
            },
            configTbale:{
                header: ['列1', '列2', '列3'],
                waitTime:'900',
                //carousel:'page',
                data: [
                    ['行1列1', '行1列2', '行1列3'],
                    ['行2列1', '行2列2', '行2列3'],
                    ['行3列1', '行3列2', '行3列3'],
                    ['行4列1', '行4列2', '行4列3'],
                    ['行5列1', '行5列2', '行5列3'],
                    ['行6列1', '行6列2', '行6列3'],
                    ['行7列1', '行7列2', '行7列3'],
                    ['行8列1', '行8列2', '行8列3'],
                    ['行9列1', '行9列2', '行9列3'],
                    ['行10列1', '行10列2', '行10列3']
                ]
            },

            configJd:{
                value: 66,
                lineDash: [10, 2]
            },
            configZt:{
                data: [
                    {
                    name: '南阳',
                    value: 167
                    },
                    {
                    name: '周口',
                    value: 67
                    },
                    {
                    name: '漯河',
                    value: 123
                    },
                    {
                    name: '郑州',
                    value: 55
                    },
                    {
                    name: '西峡',
                    value: 98
                    }
                ]
            }
        }
    },
    methods:{
        data1(val){
            console.log(val)
        },
       
    },
    mounted(){
        /* let a = 1
        while(true){
            let b = a++
                alert(`我恁达 ${b}`)
            } */
    }
}
</script>

<style scoped>
    .maxMap{
        width: 100%;
        height: 100%;
        display: flex;
        color: #fff;
        background: rgb(4, 15, 37);
    }
    .right{
        width:27%;
        height: 100%;
    }
    .mid{
        width:46%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .leftSon{
        width: 100%;
        height: 33%;
        margin-top: 0.3%;        
    }
    .leftSon1{
        width: 100%;
        height: 33%;
        margin-top: 0.3%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .maxDt{
        height: 70%;width: 100%;
    }
    .left{
        width:27%;
        height: 100%;
    }
    >>> .dv-border-box-1 .border-box-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    >>> .dv-border-box-8 .border-box-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    >>> .dv-border-box-7
    + .border-box-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    >>> .dv-border-box-6 .border-box-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    >>> .dv-border-box-5 .border-box-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    >>> .dv-border-box-7 .border-box-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>